<!--
 * @Author: your name
 * @Date: 2019-11-19 09:26:22
 * @LastEditTime: 2019-11-22 13:01:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\views\Search.vue
 -->
<template>
  <div>
    <form action="/">
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <div v-if="isSearch" class="searchHistory">
      <div class="top">
        <p>搜索历史</p>
        <van-icon name="delete" @click="delTagList"></van-icon>
      </div>
      <div class="tagList">
        <van-divider v-show="tagList.length<1">暂无搜索记录</van-divider>
        <van-tag @click="tagClick(item)" v-for="(item,index) in tagList" :key="index">{{item}}</van-tag>
      </div>
    </div>
    <div v-else>
      <van-swipe-cell
        v-for="(item,index) in productList"
        :key="index"
        :name="item.id"
        :on-close="onClose"
      >
        <template slot="left">
          <van-button square type="primary" text="选择" />
        </template>
        <van-cell
          :border="false"
          :title="item.name"
          :value="'商品上架时间:'+$moment(item.ctime).format('YYYY-MM-DD')"
        />
        <template slot="right">
          <van-button square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>
           
<script>
import { getprodlist, delproduct, addproduct } from '@/api/index'
export default {
  data() {
    return {
      searchValue: '',
      isSearch: true,
      productList: [],
      tagList: localStorage.getItem('tagList') ? JSON.parse(localStorage.getItem('tagList')) : []
    }
  },
  methods: {
    onSearch(value) {
      if (value.trim() === '') {
        this.$toast('请输入有效内容')
        return
      }

      this.tagList.push(value)
      // 利用Set不重复的特性去重
      this.tagList = [...new Set(this.tagList)]
      localStorage.setItem('tagList', JSON.stringify(this.tagList))
      this.isSearch = false
      this.getprodlist()
    },
    onCancel() {
      this.isSearch = true
    },
    /* 删除商品 */
    async cellClose(id) {
      await delproduct(id)
      this.getprodlist()
    },
    /* swipe-cell 删除 */
    onClose(clickPosition, instance, detail) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog
            .confirm({
              message: '确定删除吗？'
            })
            .then(() => {
              console.log(this, 897)
              this.cellClose(detail.name)
              instance.close()
            })
          break
      }
    },
    // 获取商品
    async getprodlist() {
      const { data: res } = await getprodlist()
      this.productList = res.message
      console.log(res.message)
    },
    // delTagList 删除 tagList
    delTagList() {
      localStorage.removeItem('tagList')
      this.tagList = []
    },
    // 点击历史搜索tag
    tagClick(value) {
      this.searchValue = value
    }
  }
}
</script>
<style lang="less" scoped>
.searchHistory {
  padding: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-tag {
    margin: 0 5px;
    font-size: 14px;
  }
}
</style>